<template>
  <div class="ban">
      <span class="hao">最受好评电影</span>
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"  v-for="item in reying" :key="item.id">
            <img :src="item.img"/>
             <div class="on-look">观众评分{{ item.mk }}</div>
            <div class="ban-text">{{item.nm}}</div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Swiper from "swiper";
//引入axios
import axios from "axios";
export default {
  name: "mybanner",
  data() {
    return {
      reying: [], //电影数据
      swiperOption: {},
    };
  },
  mounted() {
    //使用axios获取数据
    axios
      .get(
        "/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4"
      )
      .then((rel) => {
        console.log(rel);
        //图片w.h会报错，修改
        rel.data.data.hot.forEach((item) => {
          item.img = item.img.replace("w.h", "128.180");
        });
        this.reying = rel.data.data.hot;
        console.log(this.reying);
      });
      let swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  },
};
</script>

<style scoped>
@import "../../node_modules/swiper/swiper.min.css";
.swiper-slide{
  width:85px !important;
  margin-right:0 !important;
  /* margin-left:30px; */
}
.swiper-slide img {
  display: block;
  width: 85px;
  height: 115px;
  object-fit: cover;
}
  .ban{
    position: absolute;
    width:100%;
    height:4rem;
  }
  .ban .hao{
    display: block;
    margin: .26666666666666666rem .32rem;
    font-size: .37333333333333335rem;
    color:#333;
  }
  /* .mySwiper{
    position: relative;
    width:100%;
    height:150px;
    display: flex;
    overflow:hidden;
  } */
  .swiper-slide{
    width:85px;
    padding-left:13px;
    height: 150px;
  }

.swiper-slide img {
  display: block;
  width: 85px;
  height: 115px;
  object-fit: cover;
}
.ban-text{
  width:2.2666666666666666rem;
  height:.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color:#222;
  font-size: 13px;
  font-weight: bold;
  margin-top:-0.26666666666666666rem;
}
.on-look {
  text-align: center;
  position: relative;
  color: #faaf00;
  font-weight: 600;
  bottom: 20px;
  overflow: hidden;
  font-size: 13px;
}
</style>